<template>
    <view>
        <view class="p_20">
            <view class="dis_f_l_c m_b_10">
                <u-tag v-if="userInfo.proxyApprovalStatus==2" text="待审核" type="warning" plain></u-tag>
                <u-tag v-if="userInfo.proxyApprovalStatus==3" text="审核通过" type="success" plain></u-tag>
            </view>
            <view class="card_box p_10 m_b_10"  v-if="userInfo.proxyApprovalStatus==4">
                <view style="display: flex">
                    <u-tag text="审核未通过" type="error" plain></u-tag>
                </view>
                <view class="c_9 f_s_14 m_t_5">{{userInfo.proxyRemarks}}</view>
            </view>
            <view class="content_box">
                <view class="m_t_10">
                    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
                    <u--form
                        labelPosition="left"
                        :model="query"
                        :rules="rules"
                        ref="uForm"
                        labelWidth="100"
                    >
                        <u-form-item
                            label="姓名"
                            prop="name"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.name"
                                border="none"
                                placeholder="请输入姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系电话"
                            prop="phonenumber"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.phonenumber"
                                border="none"
                                placeholder="请输入联系电话"
                            ></u--input>
                        </u-form-item>
<!--                        <u-form-item
                            label="身份信息"
                            prop="lxNameEj"
                            borderBottom
                            ref="item1"
                        >
                            <u-radio-group v-model="query.type">
                                <u-radio shape="circle" value="个人" name="1" label="个人" ></u-radio>
                                <view class="m_l_10">
                                    <u-radio shape="circle" value="企业" name="2" label="企业" ></u-radio>
                                </view>
                                <view class="m_l_10">
                                    <u-radio shape="circle" value="代理" name="3" label="代理" ></u-radio>
                                </view>
                            </u-radio-group>
                        </u-form-item>-->
                        <u-form-item
                            label="地址"
                            prop="proxyRegion"
                            borderBottom
                            ref="item1"
                        >
                            <uni-data-picker v-model="query.proxyRegion" :localdata="areaList" placeholder="请选择地区" popup-title="请选择地区" @change="onchange"  ></uni-data-picker>
                        </u-form-item>
                        <view class="dis_f_r_c m_t_10 m_b_10 f_s_14 c_9">{{query.dz}}</view>
                    </u--form>
                    <view class="dis_f_r_c m_t_50">
                        <u-button type="primary" @click="handleSend" color="#54B62D">申请</u-button>
                    </view>
                </view>
            </view>
            <u-picker :show="showPicker"
                      :columns="columnsPicker"
                      :keyName="keyName"
                      @cancel="showPicker = false"
                      @confirm="handlePickerShure"></u-picker>
        </view>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>
<script>

import {becomeAgentApi, getAreaListApi} from "@/sheep/api";
import { mapGetters, mapMutations } from "vuex";
export default {
    name: "index",
    data() {
        return {
            columnsPicker:[],
            showPicker: false,
            keyName:'',
            areaList:[],
            query: {
                phonenumber: '',
                proxyRegion: '',
                name: '',
            },
            rules: {
                'phonenumber': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'name': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'proxyRegion': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
            },

            isShow: false,
        }
    },
    onLoad(params) {
    },
    onShow() {
        if (!this.isShow) {
        }
        this.getArea()
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    methods: {
        checkboxChange(e){},
        handleToProtocol(e){
            uni.navigateTo({
                url: '/pages/agreement/index?type=1'
            })
        },
        onchange(e) {
            const value = e.detail.value
            if (value.length>0){
                this.query.proxyRegion= value[1].text
            }else{
                this.query.proxyRegion = ''
            }
        },
        getArea(){
            getAreaListApi().then(res=>{
                this.areaList = res.data
            })
        },
        handlePickerShure(e){
            this.query.proxyRegion =  e[1].text
            this.showPicker = false
        },
        handleSend() {
            this.$refs.uForm.validate().then(res=>{
                uni.showLoading({});
                becomeAgentApi(this.query).then(res => {
                    uni.hideLoading()
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                })
            })
        },
    }
}
</script>

<style scoped lang="scss">
.release {
    width: 100rpx;
    height: 70rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #ffffff;
}

// 支付弹层
.pay {
    padding: 30rpx;

    .pay-title {
        font-size: 35rpx;
    }

    .pay-select {
        margin: 50rpx;
    }

    .pay-flex {
        display: flex;
        margin-top: 30rpx;

        /deep/ .u-button {
            height: 84rpx !important;
            font-size: 30rpx;

            &:first-child {
                margin-right: 25rpx !important;
            }
        }
    }

    .surplus {
        margin-top: 35rpx;
        font-size: 25rpx;

        .surplus-num {
            margin-left: 15rpx;
        }
    }
}
</style>
